<template>
  <div class="hp-notfound">
    <div class="notfound_img">
      <van-empty image="error" :description="errorMsg" />
    </div>
    <div class="notfound_operation">
      <van-button type="default" @click="toTabbar()">退出系统</van-button>
    </div>
  </div>
</template>

<script>
import {logout} from "@/utils/login";

export default {
  name: 'notFound',
  data () {
    return {
      errorMsg: this.$route.query.errMsg || '请求资源访问错误',
      redirect: this.$route.query.redirect || '/'
    };
  },
  methods: {
    toTabbar () {
      logout()
      }
  },
  mounted () {
    const back = function (e) {
      e.preventDefault();
      logout()
    };

    // 屏蔽物理键返回或者原生title返回事件
    document.addEventListener('back', back);
    // debugger
    this.$once('hook:beforeDestroy', () => {
      document.removeEventListener('back', back);
    });
  }
};
</script>

<style lang="scss" scoped>
  .hp-notfound {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    .notfound_img {
      position: absolute;
      top: 120px;
      left: 50%;
      transform: translateX(-280px)
    }

    .notfound_operation {
      position: absolute;
      top: 620px;
      left: 50%;
      transform: translateX(-145px)
    }
    ::v-deep .van-empty__description {
      width: 320px;
      text-align: center;
    }
  }
</style>
